<template>
  <KView class="bind-phone">
    <page-header title="绑定手机号" @back-click="toBack"></page-header>
    <KView class="bind-phone-line"></KView>

    <KView class="bind-phone-content">
      <template v-if="bindData!==null">
        <KView class="bind-phone-input">
          <KView>
            <sys-input :disabled="true" v-model="bindData.userName" placeholder="请输入用户名" icon="userName"></sys-input>
          </KView>
          <KView>
            <sys-input v-model="bindData.phoneNum" placeholder="请输入手机号" icon="phone"></sys-input>
          </KView>
          <KView class="bind-phone-code clearfix">
            <KView class="bind-phone-code-input">
              <sys-input v-model="bindData.phoneCode" placeholder="请输入验证码" icon="key"></sys-input>
            </KView>
            <KView class="bind-phone-code-btn">
              <countdown-button text="获取验证码" action-text="重新获取" :before-click-fun="getVerificationCode" :count="60">
              </countdown-button>
            </KView>
          </KView>
        </KView>

        <KView class="bind-phone-labeldata">
          <KView class="bind-phone-labeldata-title">个人标签</KView>
          <bind-phone-tag :option="bindData.tagList" :limit="3"></bind-phone-tag>
        </KView>
      </template>
    </KView>
    <KView class="bind-phone-btn">
      <KView class="phone-btn" @click="toBind">绑定</KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import storeMixins from 'mixins/storeMixins';
  import PersonalCenterApi from 'services/personalCenterApi';

  import PageHeader from 'common/pageHeader';
  import SysInput from 'common/sysInput';
  import CountdownButton from 'common/countdownButton';
  import BindPhoneTag from './bindPhoneTag';

  import BindPhoneData from 'models/personalCenter/bindPhoneData';

  export default {
    mixins: [storeMixins],

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        bindData: null
      };
    },

    created() {
      this.bindData = new BindPhoneData(this.user);
    },

    methods: {
      getVerificationCode() {
        let bindData = this.bindData;
        let code = bindData.checkValid(true);
        if (code !== '') {
          let msg = this.i18n.getMsg(`personalCenter.bindPhone.error.${code}`);
          this.$api.showToast({
            title: msg,
            icon: 'none'
          });
          return window.Promise.resolve(false);
        }

        return PersonalCenterApi.sendCode(bindData.phoneNum).then(msg => {
          this.$api.showToast({
            title: '验证码发送成功，有效期5分钟',
            icon: 'none'
          });
          return true;
        }).catch(error => {
          return false;
        });
      },

      toBind() {
        let bindData = this.bindData;
        let code = bindData.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`personalCenter.bindPhone.error.${code}`);
          this.$api.showToast({
            title: msg,
            icon: 'none'
          });
          return;
        }

        SystemUtil.showLoading('绑定中...')
        PersonalCenterApi.toBindPhone(bindData).then(msg => {
          this.$api.showToast({
            title: '成功绑定手机号',
            icon: 'success'
          });

          let user = this.user;
          user.phoneNum = bindData.phoneNum;
          this.setUser(user);

          let type = this.$route.query.type;
          if (type === 'circle') {
            if (this.isMiniprogram) {
              let pages = getCurrentPages();
              let page = pages[pages.length - 2];
              page.window.actionData = {
                type: 'bindPhoneSuccess',
                data: {}
              };
            }
          }
          this.toBack();
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toBack() {
        if (this.isMiniprogram) {
          wx.navigateBack();
        } else {
          window.history.back();
        }
      }
    },

    components: {
      PageHeader,
      SysInput,
      CountdownButton,
      BindPhoneTag
    }
  };

</script>

<style lang="scss">
  .bind-phone {
    height: 100%;

    .page-header {
      padding-top: formatPx(35);
      margin-bottom: formatPx(35);
    }

    .bind-phone-line {
      height: 1px;
      background: #DADADA;
    }

    .phone-btn {
      color: #ffffff;
      font-size: formatPx(28);
      background: #59c264;
      height: formatPx(90);
      line-height: formatPx(90);
      text-align: center;
      border-radius: formatPx(45);
    }

    .bind-phone-content {
      margin-top: formatPx(55);
      margin-bottom: formatPx(20);
      padding: 0 formatPx(30);
      height: calc(100% - #{formatPx(290)});
      overflow: auto;

      .bind-phone-input {
        >div {
          margin-bottom: formatPx(30);

          &:last-child {
            margin-bottom: 0;
          }
        }

        .bind-phone-code {
          .bind-phone-code-input {
            float: left;
            width: formatPx(435);
            height: 100%;
          }

          .bind-phone-code-btn {
            float: right;
            width: formatPx(220);
            height: 100%;
          }
        }
      }

      .bind-phone-labeldata {
        margin-top: formatPx(40);

        .bind-phone-labeldata-title {
          font-size: formatPx(26);
          margin-bottom: formatPx(24);
        }
      }
    }

    .bind-phone-btn {
      height: formatPx(90);
      padding: 0 formatPx(30);
      overflow: auto;
    }
  }

</style>
